<template>
	<view :style="skin" class="content message">
		<view class="mtLine">
		</view>
		<scroll-view refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore" @scrolltolower="toBottom" :style="{height: contentHeight}" :scroll-y="true"
			class="messageBox">
			
			<view class="messageList flex-c-SB" v-for="(item,index) in messageList" :key="index" @click="handleView(item)">
				<view  class="circle typeColor1">
					<text  class="iconfont icon-a-riFill-notification-2-fillMZAUiRy"></text>
				<!-- 	<text v-else-if="item.type == 2" class="iconfont icon-a-riFill-checkbox-circle-fillHpobbKd"></text>
					<text  v-else-if="item.type == 3" class="iconfont icon-a-riFill-refund-fill5a41eor"></text> -->
				</view>
				<view class="word">
					<view class="headBox flex-c-SB">
						<view class="title">
							{{item.codeDesc}}-{{item.typeDesc}}
						</view>
						<view class="date">
							{{item.fdate}}
						</view>
					</view>
					<view class="msgInfo">
						{{item.msgContent}}
					</view>
				</view>
				<view class="unRead">{{item.unreadCounts}}</view>
			</view>
			
			<p class="isMore" v-if="isMore">No More</p>
			
			</scroll-view>
		


		<customtabbar tabbarIndex="2" />
	</view>
</template>
<script>
	import customtabbar from '@/components/custom-tab-bar.vue'
	import { getMsgList , updRead } from '@/api/leaMsg.js'
	import {
		mapState,
	} from 'vuex'
	export default {
		data() {
			return {
				messageList:[],
				contentHeight: '0px',
				triggered: true,
				_freshing: false,
				isMore:false,
			}
		},
		created() {
			let titleHeight = uni.getSystemInfoSync().statusBarHeight + 32  + 'px'
			this.contentHeight = `calc(100% - ${titleHeight})`
			console.log(this.contentHeight);
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
			this.getList()
		},
		onReady() {
			let that = this
			let color = this.$store.getters.getSkinColor('--moduleColor')
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: color
			})
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin,
			})

		},
		components: {
			customtabbar,
		},
		methods: {
			handleView(item){
				console.log(item);
				uni.setStorageSync('messInfo',item.list)
				uni.navigateTo({
					url:'/pages/messInfo/messInfo'
				})
			},
			getList(){
				getMsgList().then(res=>{
					console.log(res);
					if(res.code == 0){
						this.messageList = res.data
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					
				})
			},
			async onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				await this.getList()
				
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 1500)
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			toBottom(){
				if (this.isMore) return false
				this.getList()
			},
		}

	}
</script>
<style lang="scss" scoped>
.message{
	.mtLine{
		height: 8px;
		background-color: #f8f8f8;
	}
	.messageList{
		height: 72px;
		border-bottom: 0.5px solid #eee;
		font-size: 14px;
		padding:  12px 16px;
		background-color: #fff;
		box-sizing: border-box;
		position: relative;
		.unRead{
			position: absolute;
			top: 0px;
			right: 8px;
			width: 16px;
			height: 16px;
			color: #fff;
			border-radius: 50%;
			background-color: #F53F3F;
			text-align: center;
			line-height: 16px;
		}
		.circle{
			width: 48px;
			height: 48px;
			border-radius: 50%;
			background-color: red;
			text-align: center;
			line-height: 48px;
			text{
				color: #fff;
			}
		}
		.typeColor1{
			background-color: #F53F3F;
		}
		.typeColor2{
			background-color: #00B42A;
		}
		.typeColor3{
			background-color: #F7BA1E;
		}
		.word{
			width: calc(100% - 60px);
			margin-left: 12px;
			.headBox{
				margin-bottom: 4px;
				line-height: 22px;
				.title{
					font-size: 16px;
					color: #1D2129;
					font-family: 600;
					
				}
				.date{
					font-size: 12px;
					color: #A9AEB8;
				}
			}
			.msgInfo{
				font-size: 14px;
				color: #86909C;
				line-height: 20px;
			}
		}
	}
	.isMore {
				width: 100%;
				height: 35px;
				text-align: center;
				line-height: 35px;
				margin-top: 8px;
				color: var(--subtopicNextTextColor);
			}
	
}
</style>